<template>
    <div class="collection-news">
        <van-swipe-cell :right-width="160" v-for="item in dataList">
            <van-cell-group>
                <div class="list">
                    <div class="content app-right-icon">
                        <div class="left"><img src="../../../assets/research-list.png" /></div>
                        <div class="right">
                            <div>{{item.name}}</div>
                            <div>{{item.content}}</div>
                        </div>
                    </div>
                    <div class="date">
                        <span>{{item.targ}}</span>
                        <span>{{item.date}}</span>
                    </div>
                </div>
            </van-cell-group>
            <span slot="right"><img src="../../../assets/icon-dele.png" /></span>
        </van-swipe-cell>
    </div>
</template>

<style lang="less" scoped>
    @import '../../../style/variable';
    .collection-news{
        overflow: hidden;
        background: #F8F8F8;
        padding-bottom: 0.8rem;
        .list {
            margin-top: 0.8rem;
            padding: 1.6rem;
            .content {
                display: flex;
                align-items: center;
                .left {
                    margin-right: 0.6rem;
                    img {
                        width: 4.8rem;
                        height: 4.8rem;
                    }
                }
                .right {
                    div:nth-of-type(1) {
                        color: #43484E;
                        font-size: 1.5rem;
                        margin-bottom: 0.7rem;
                        padding-right: 2rem;
                    }
                    div:nth-of-type(2) {
                        color: #7A7A7A;
                        font-size: 1.2rem;
                    }
                }
            }
            .date {
                color: #949494;
                font-size: 1.2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 1.1rem;
            }
        }
    }
</style>

<style lang="less">
    @import '../../../style/variable';
    .collection-news{
        .van-swipe-cell__wrapper {
            .van-cell-group {
                border-radius: 0.6rem;
            }
            .van-swipe-cell__right {
                background-color: #F8F8F8;
                width: 8rem;
                display: flex;
                align-items: center;
                span {
                    display: block;
                    width: 3.9rem;
                    height: 3.9rem;
                    border-radius: 50%;
                    background-color: @color-white;
                    transform: translate(25%, 0);
                    text-align: center;
                    line-height: 3.9rem;
                    img {
                        width:1.3rem;
                        height: 1.3rem;
                    }
                }
            }
        }
    }
</style>

<script>
    import { Cell, CellGroup, SwipeCell, Icon } from 'vant';
    export default {
        components: {
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [SwipeCell.name]: SwipeCell,
            [Icon.name]: Icon,
        },
        data(){
            const dataList = Array(8).fill({
                name: '评级从AA骤降到A+，波及37家银行，又一家中国500强轰然倒下？',
                content: '',
                targ: '#每日早餐#',
                date: '2018/07/01',
            });

            return {
                dataList
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>